/**
 * Custom styling for the snippets table
 */

@use 'sass:map';
@use 'sass:color';
@use 'common/theme';
@use 'common/badges';
@use 'common/switch';
@use 'common/select';
@use 'manage/cloud';

.column-name,
.column-type {
	.dashicons {
		font-size: 16px;
		inline-size: 16px;
		block-size: 16px;
		vertical-align: middle;
	}

	.dashicons-clock {
		vertical-align: middle;
	}
}

.active-snippet .column-name > a {
	font-weight: 600;
}

.active-snippet {
	td, th {
		background-color: rgba(#78c8e6, 0.06);
	}

	th.check-column {
		border-inline-start: 2px solid #2ea2cc;
	}
}

.column-priority input {
	appearance: none;
	background: none;
	border: none;
	box-shadow: none;
	inline-size: 4em;
	color: #666;
	text-align: center;

	&:hover, &:focus, &:active {
		color: #000;
		background-color: #f5f5f5;
		background-color: rgb(0 0 0 / 10%);
		border-radius: 6px;
	}

	&:disabled {
		color: inherit;
	}
}

.clear-filters {
	vertical-align: baseline !important;
}

.snippets {
	td.column-id {
		text-align: center;
	}

	tr {
		background: #fff;
	}

	ol, ul {
		margin-block: 0 1.5em;
		margin-inline: 1.5em 0;
	}

	ul {
		list-style: disc;
	}

	th.sortable a, th.sorted a {
		display: flex;
		flex-direction: row;
	}

	.row-actions {
		color: #ddd;
		position: relative;
		inset-inline-start: 0;
	}

	.column-activate {
		padding-inline-end: 0 !important;
	}

	.clear-filters {
		vertical-align: middle;
	}

	tfoot th.check-column {
		padding-block: 13px 0;
		padding-inline: 3px 0;
	}

	thead th.check-column,
	tfoot th.check-column,
	.inactive-snippet th.check-column {
		padding-inline-start: 5px;
	}

	.active-snippet, .inactive-snippet {
		td, th {
			padding-block: 10px;
			padding-inline: 9px;
			border: none;
			box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
		}
	}

	tr.active-snippet + tr.inactive-snippet th,
	tr.active-snippet + tr.inactive-snippet td {
		border-block-start: 1px solid rgb(0 0 0 / 3%);
		box-shadow: inset 0 1px 0 rgb(0 0 0 / 2%), inset 0 -1px 0 #e1e1e1;
	}

	&, #all-snippets-table, #search-snippets-table {
		a.delete:hover {
			border-block-end: 1px solid #f00;
			color: #f00;
		}
	}

	#wpbody-content & .column-name {
		white-space: nowrap; /* prevents wrapping of snippet title */
	}
}

td.column-description {
	max-inline-size: 700px;

	pre {
		white-space: unset;
	}
}

.inactive-snippet {
	@include theme.link-colors(#579);
}

@media screen and (width <= 782px) {
	p.search-box {
		float: inline-start;
		position: initial;
		margin-block: 1em 0;
		margin-inline: 0;
		block-size: auto;
	}
}

.wp-list-table .is-expanded td.column-activate.activate {
	/* fix for mobile layout */
	display: table-cell !important;
}

.nav-tab-wrapper + .subsubsub, p.search-box {
	margin-block: 10px 0;
	margin-inline: 0;
}

.snippet-type-description {
	border-block-end: 1px solid #ccc;
	margin: 0;
	padding-block: 1em;
	padding-inline: 0;
}

.code-snippets-notice a.notice-dismiss {
	text-decoration: none;
}

.refresh-button-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-block: 15px -39px;
	gap: 7px;
}

#refresh-button {
	inline-size: 30px;
	padding: 0;
	font-size: 20px;
	line-height: 1.4;
}

.wrap h2.nav-tab-wrapper {
	.nav-tab {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 8px;
	}
}

@media screen and (width <= 1190px) {
	.nav-tab {
		.snippet-label {
			display: none;
		}
	}
}